import { React, useState, useEffect } from 'react';
import './shoppingcollection.css';
import '../../index.css'
import axios from 'axios';
import smallgouwuche from '.././browse/购物车小图标one.png';
import { Pagination } from 'antd';
import InterIP from '../../IP/IP'
import { useNavigate } from 'react-router-dom';
export default function Shoppingcollection() {
  const [data, setdata] = useState([]);
  const [twig, setTwig] = useState();
  var userID = document.cookie.slice(5);
  let IP = InterIP().props.children;
  const navigate = useNavigate();
  useEffect(() => {
    var userID = document.cookie.slice(5);
    let IP = InterIP().props.children;
    axios.post("http://" + IP + ":3000/user/selCollect", {
      user_id: userID,
      page: '1',
    })
      .then((res) => {
        setdata((data) => data = res.data.rows)
        setTwig((twig) => twig = res.data.rows_length)
      })

  }, []);

  // 请求第几页
  function browse_pagingye(page) {

    axios.post("http://" + IP + ":3000/user/selCollect", {
      user_id: userID,
      page: page,
    }).then((res) => {
      setdata((data) => data = res.data.rows)
      setTwig((twig) => twig = res.data.rows_length)
    })
  }

  // 删除请求！！！！！！！！！！！
  function shoppingcollection_remove(id, k) {
    return () => {
      axios.post("http://" + IP + ":3000/user/delCollect", {
        product_id: id,
      }).then((res) => {
        console.log(res);
        setdata((data) => data = data.filter((v, key) => {
          return !(key === k)
        }))
      })
    }
  }

  function collectDetails(id) {
    return () => {
      axios.post('http://' + IP + ':3000/index/product', {
        product_id: id,
      }).then((res) => {
        if (res.data[0].product_variety === 'friday') {
          localStorage.productId = id;
          navigate('/home/fridayDetails')
        } else {
          localStorage.productId = id;
          navigate('/home/productDetails')
        }
      })
    }
  }
  return (

    < div className="shoppingcollectionbox" >
      <div className="mybill_top">我的收藏</div>
      <div className="shoppingcollectio_bottom" >
        {data.map((data, k) => {
          return (
            <div className="shoppingcollection_main" key={data.collect_id} >
              <div className="shoppingcollection_img" onClick={collectDetails(data.product_id)}><img src={data.commodity_img} alt="" /></div>
              <div className="shoppingcollection_name">{data.commodity}</div>
              <div className="shoppingcollection_xa">{data.introduce}</div>
              <div className="shoppingcollection_letter">
                <div>￥<span>{data.current_price}</span></div>
                <div>￥<span>{data.original_price}</span></div>
                <div className="shoppingcollection_img2"><img src={smallgouwuche} alt="" /></div>
              </div>
              <div className="shoppingcollection_button"><button onClick={shoppingcollection_remove(data.product_id, k)}>取消收藏</button></div>
            </div>
          )
        })}
      </div>


      <Pagination className="browse_paging" onChange={browse_pagingye} total={twig} pageSize={3}
      ></Pagination>
    </div >
  )
}
